<template>
  <div class="-page">
    <button @click="goBack"></button>
    <video
      ref="video"
      :src="videoUrl"
      controls
      @loadedmetadata="onVideoLoaded"
      class="video"
    ></video>
  </div>
  <div class="recommended-movies">
    <h2>推荐影片</h2>
    <div class="list">
      <div class="item" v-for="movie in movies" :key="movie.id">
        <img :src="movie.image" :alt="movie.title" class="movie-image" />
        <h3 class="title">{{ movie.title }}</h3>
        <p class="dec">{{ movie.description }}</p>
      </div>
    </div>
  </div>
</template>

<script setup>
import { ref, onMounted } from "vue";
import { useRoute, useRouter } from "vue-router";

const movieId = ref("");
const videoUrl = ref("");
const router = useRouter();
const movies = ref([
  {
    id: 1,
    title: "蜘蛛侠2",
    image:
      "https://tse1-mm.cn.bing.net/th/id/OIP-C.4JjN-v-khdYzN4Rrvs3NyADQEr?w=134&h=192&c=7&r=0&o=5&dpr=1.5&pid=1.7",
    description:
      "《蜘蛛侠2》是2004年6月30日上映的美国超级英雄类电影。该片是2002年电影《蜘蛛侠》的续集，改编自漫威同名漫画，由山姆·雷米执导，阿尔文·萨金特编剧，托比·马奎尔、克里斯汀·邓斯特、詹姆斯·弗兰科、阿尔弗雷德·莫里纳、罗斯玛丽·哈里斯、唐娜·墨菲主演。\n" +
      "影片讲述了在蜘蛛侠事件两年后，彼得在处理自己的私人生活和蜘蛛侠角色时遇了困难，这影响了他的平民生活。同时，他还要面对因实验失败，而被罪恶控制的“章鱼博士”所带来的强大威胁",
  },
  {
    id: 2,
    title: "哈利波特与魔法石",
    image:
      "https://tse3-mm.cn.bing.net/th/id/OIP-C.VTBVebs2tO-RuHKpIXfgRwHaK-?w=132&h=196&c=7&r=0&o=5&dpr=1.5&pid=1.7",
    description:
      "影片《哈利·波特与魔法石》改编于英国畅销作家J.K.罗琳同名小说。电影的剧本是由斯蒂芬·科洛弗所编，克里斯·哥伦布执导，丹尼尔·雷德克里夫、鲁伯特·格林特、艾玛·沃特森、理查德·哈里斯等联袂出演。影片于2001年11月16日在美国上映 [20]，2002年1月26日在中国内地首映 [1]。2020年8月14日，该片的全新4K修复3D版在中国内地上映。 [23]\n" +
      "《哈利·波特》系列电影将书中描述的魔法世界利用现代高科技技术在观众面前真实再现，其宏大的场面及富于想象力的人物造型在观众中赢得一片喝彩声，已成为世界电影史上的经典卖座影片。",
  },
  {
    id: 3,
    title: "奥本海默",
    image:
      "https://tse3-mm.cn.bing.net/th/id/OIP-C.2Titw0hAF4PzD5DyByjpWgHaLu?w=121&h=192&c=7&r=0&o=5&dpr=1.5&pid=1.7",
    description:
      "《奥本海默》是克里斯托弗·诺兰自编自导的传记电影，由基里安·墨菲主演 [1]，于2023年7月21日在北美上映 [1]，8月30日在中国内地上映。\n" +
      "该片改编自Kai Bird、Martin J. Sherwin所著书籍《美国普罗米修斯：奥本海默的胜与悲》 [10]，讲述了美国“原子弹之父”罗伯特·奥本海默在“二战期间”领导研制原子弹的过程，以及他在二战结束后遭遇不公正听证会的故事",
  },
]);
videoUrl.value =
  "https://codelover.club/coursefiles/lnnpREORzoIdSs-hRgPHOKXVIzwM.mp4";

onMounted(() => {
  const routeParams = useRoute().params;
  movieId.value = routeParams.movie_id || "";

  if (movieId.value) {
    console.log("播放的电影ID:", movieId.value);
  }
});

const onVideoLoaded = () => {
  console.log("视频加载完成");
};

const goBack = () => {
  router.back();
};
</script>

<style scoped>
.-page {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 20px;
  background-repeat: no-repeat; /* 图片不重复 */
  background-size: cover; /* 图片覆盖整个容器 */
  background-position: center; /* 图片居中显示 */
}

.viedo {
  width: 600px;
  max-width: 100%; /* 确保视频播放器不会超出其容器 */
  height: auto; /* 高度自适应以维持视频比例 */
  margin-top: 40px;
}

/* 添加媒体查询以适配不同屏幕大小 */
@media (max-width: 600px) {
  .-container {
    padding: 10px;
  }

  h1 {
    font-size: 1.5em;
  }
}

.recommended-movies {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 20px;
  margin-top: 20px;
}

.list {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-around;
}

.item {
  margin: 10px;
  width: 200px; /* 或您希望的任何宽度 */
  background-color: #fff;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
  border-radius: 5px;
  overflow: hidden;
  text-align: left;
}

.movie-image {
  width: auto;
  height: auto;
  display: block;
}

.title {
  padding: 10px;
  font-weight: bold;
}

.dec {
  padding: 0 10px 10px;
  color: #666;
}

/* 响应式布局 */
@media (max-width: 600px) {
  .item {
    width: 100%;
    margin: 10px 0;
  }
}
</style>
